<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>哔哩哔哩 - 登录</title>
    <style>
        /* 登录页面样式 */
        .body{
            text-align: center;
        }

        .login-page * {
            margin: 0 auto;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", sans-serif;
        }

        .login-page body {
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: url('https://i0.hdslb.com/bfs/space/c5/c5133a3f9c4f3d2b4a5d2a5f4d3c2b1a3c4d5b.png');
            background-size: cover;
            background-position: center;
        }

        .login-box {
            background-color: white;
            width: 400px;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }

        .login-logo {
            text-align: center;
            margin-bottom: 30px;
        }

        .login-logo img {
            width: 120px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            outline: none;
        }

        .form-group input:focus {
            border-color: #1890ff;
            box-shadow: 0 0 4px rgba(24, 144, 255, 0.2);
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            background-color: #fb7299;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .login-btn:hover {
            background-color: #e65c83;
        }

        .other-login {
            text-align: center;
            margin-top: 20px;
            color: #666;
        }

        .other-login span {
            margin: 0 10px;
        }

        .other-login a {
            color: #666;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            margin: 0 8px;
        }

        .other-login img {
            width: 24px;
            height: 24px;
            margin-right: 4px;
        }

        .go-back {
            text-align: center;
            margin-top: 25px;
            color: #999;
        }

        .go-back a {
            color: #1890ff;
            text-decoration: none;
        }

        /* 个人中心样式 */
        .profile-page * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑", sans-serif;
        }

        .profile-page body {
            background-color: #f4f4f4;
        }

        .header {
            background-color: #fff;
            height: 60px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .header-logo {
            width: 120px;
            margin-right: 40px;
        }

        .nav {
            display: flex;
            list-style: none;
        }

        .nav li {
            margin-right: 20px;
        }

        .nav a {
            color: #333;
            text-decoration: none;
            padding: 8px 10px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .nav a:hover,
        .nav a.active {
            background-color: #f0f0f0;
            color: #fb7299;
        }

        .user-info {
            margin-left: auto;
            display: flex;
            align-items: center;
        }

        .avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            overflow: hidden;
        }

        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .username {
            font-weight: bold;
        }

        .logout-btn {
            margin-left: 20px;
            color: #999;
            cursor: pointer;
            transition: color 0.3s;
        }

        .logout-btn:hover {
            color: #fb7299;
        }

        .container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            display: flex;
        }

        .sidebar {
            width: 240px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-right: 20px;
        }

        .sidebar-menu {
            list-style: none;
        }

        .sidebar-menu li {
            margin-bottom: 10px;
        }

        .sidebar-menu a {
            display: block;
            padding: 10px;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .sidebar-menu a:hover,
        .sidebar-menu a.active {
            background-color: #f0f0f0;
            color: #fb7299;
        }

        .main-content {
            flex: 1;
        }

        .profile-card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .profile-info h1 {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .profile-info p {
            color: #666;
            margin-bottom: 5px;
        }

        .edit-profile-btn {
            background-color: #fb7299;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .edit-profile-btn:hover {
            background-color: #e65c83;
        }

        .section-title {
            font-size: 18px;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .video-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
        }

        .video-card {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }

        .video-card:hover {
            transform: translateY(-5px);
        }

        .video-thumbnail {
            height: 135px;
            overflow: hidden;
            position: relative;
        }

        .video-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-duration {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 12px;
            padding: 2px 4px;
            border-radius: 2px;
        }

        .video-info {
            padding: 10px;
        }

        .video-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            max-height: 3.2em; /* 限制最大高度为2行 */
            line-height: 1.6em;
        }

        /* 现代浏览器支持的多行省略 */
        .video-title {
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }

        /* 备用方案：仅显示单行省略 */
        @supports not (-webkit-line-clamp: 2) {
            .video-title {
                white-space: nowrap;
                max-height: 1.6em;
            }
        }

        .video-meta {
            font-size: 12px;
            color: #666;
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #666;
            font-size: 14px;
        }
    </style>
</head>
<body class="login-page">
    <div class="login-box">
        <div class="login-logo">
            <img src="images/bilibili小电视蓝色背景logo.jpg!con"哔哩哔哩登录">
        </div>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">手机号/邮箱/用户名</label>
                <input type="text" id="username" placeholder="请输入登录信息" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" placeholder="请输入密码" required>
            </div>
            <button type="button" class="login-btn" onclick="handleLogin()">立即登录</button>
        </form>
        <div class="other-login">
            <span>其他登录方式</span>
            <a href="#" onclick="showAlert('微信登录')"><img src="images/QQ.jpg" width="20"> 微信</a>
            <a href="#" onclick="showAlert('QQ登录')"><img src="images/微信.jpg" width="20"> QQ</a>
            <a href="#" onclick="showAlert('微博登录')"><img src="images/微博.jpg" width="20"> 微博</a>
        </div>
        <div class="go-back">
            还没有账号？<a href="#" onclick="showAlert('注册功能')">立即注册</a> | <a href="work-html.html" onclick="showAlert('返回首页')">返回首页</a>
        </div>
    </div>

    <script>
        // 模拟用户数据
        const mockUsers = {
            'wxh': {
                password: '123456',
                username: '王修航',
                avatar: 'https://picsum.photos/id/64/100/100',
                signature: '热爱生活，分享快乐',
                followers: 5432,
                following: 128,
                videos: [
                    {
                        id: 1,
                        title: '【美食教程】五分钟学会做正宗重庆小面',
                        thumbnail: 'https://picsum.photos/id/292/480/270',
                        duration: '08:45',
                        views: 145328
                    },
                    {
                        id: 2,
                        title: '周末探店｜发现一家超有氛围感的咖啡馆',
                        thumbnail: 'https://picsum.photos/id/431/480/270',
                        duration: '12:30',
                        views: 87654
                    },
                    {
                        id: 3,
                        title: '居家好物分享｜提升生活品质的小物件',
                        thumbnail: 'https://picsum.photos/id/628/480/270',
                        duration: '15:20',
                        views: 124567
                    },
                    {
                        id: 4,
                        title: '旅行vlog｜云南大理一周游全攻略',
                        thumbnail: 'https://picsum.photos/id/325/480/270',
                        duration: '22:10',
                        views: 215678
                    }
                ]
            },
            'test': {
                password: '123456',
                username: '豁达的八音',
                avatar: 'https://picsum.photos/id/237/100/100',
                signature: '这个人很懒，什么都没有留下',
                followers: 1234,
                following: 56,
                videos: [
                    {
                        id: 1,
                        title: '【前端教程】从零搭建一个完整网站',
                        thumbnail: 'https://picsum.photos/id/0/480/270',
                        duration: '15:30',
                        views: 24532
                    },
                    {
                        id: 2,
                        title: '2025年最值得学习的编程语言',
                        thumbnail: 'https://picsum.photos/id/1/480/270',
                        duration: '08:45',
                        views: 18765
                    },
                    {
                        id: 3,
                        title: 'JavaScript高级特性详解',
                        thumbnail: 'https://picsum.photos/id/2/480/270',
                        duration: '22:10',
                        views: 31245
                    },
                    {
                        id: 4,
                        title: '如何高效使用VS Code开发前端项目',
                        thumbnail: 'https://picsum.photos/id/3/480/270',
                        duration: '12:45',
                        views: 15678
                    }
                ]
            }
        };

        function showAlert(message) {
            alert(message);
        }

        function handleLogin() {
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            // 简单验证
            if (!username || !password) {
                alert('请输入用户名和密码');
                return;
            }

            // 模拟登录验证
            const user = mockUsers[username];
            if (user && user.password === password) {
                // 登录成功，存储用户信息到localStorage
                localStorage.setItem('currentUser', JSON.stringify({
                    username: user.username,
                    avatar: user.avatar
                }));
                
                // 跳转到首页
                window.location.href = 'work-html.html';
            } else {
                alert('用户名或密码错误');
            }
        }

        // 检查是否已登录
        function checkLogin() {
            const currentUser = localStorage.getItem('currentUser');
            return currentUser ? JSON.parse(currentUser) : null;
        }

        // 如果已登录，显示个人中心
        const currentUser = checkLogin();
        if (currentUser) { // 修改这里，不再检查哈希值
            document.body.className = 'profile-page';
            document.body.innerHTML = `
                <div class="header">
                    <img src="images/bilibili干杯.jpg" alt="哔哩哔哩" class="header-logo">
                    <ul class="nav">
                        <li><a href="work-html.html" class="active">首页</a></li>
                        <li><a href="#" onclick="showAlert('番剧')">番剧</a></li>
                        <li><a href="#" onclick="showAlert('直播')">直播</a></li>
                        <li><a href="#" onclick="showAlert('游戏中心')">游戏中心</a></li>
                        <li><a href="#" onclick="showAlert('会员购')">会员购</a></li>
                        <li><a href="#" onclick="showAlert('漫画')">漫画</a></li>
                        <li><a href="#" onclick="showAlert('赛事')">赛事</a></li>
                    </ul>
                    <div class="user-info">
                        <div class="avatar">
                            <img src="${currentUser.avatar}" alt="${currentUser.username}">
                        </div>
                        <div class="username">${currentUser.username}</div>
                        <div class="logout-btn" onclick="logout()">退出登录</div>
                    </div>
                </div>
                <div class="container">
                    <div class="sidebar">
                        <ul class="sidebar-menu">
                            <li><a href="#" class="active">个人中心</a></li>
                            <li><a href="#" onclick="showAlert('我的视频')">我的视频</a></li>
                            <li><a href="#" onclick="showAlert('历史记录')">历史记录</a></li>
                            <li><a href="#" onclick="showAlert('我的收藏')">我的收藏</a></li>
                            <li><a href="#" onclick="showAlert('我的关注')">我的关注</a></li>
                            <li><a href="#" onclick="showAlert('我的粉丝')">我的粉丝</a></li>
                            <li><a href="#" onclick="showAlert('设置')">设置</a></li>
                        </ul>
                    </div>
                    <div class="main-content">
                        <div class="profile-card">
                            <div class="profile-header">
                                <div class="profile-avatar">
                                    <img src="${mockUsers[username]?.avatar || mockUsers.test.avatar}" alt="${mockUsers[username]?.username || mockUsers.test.username}">
                                </div>
                                <div class="profile-info">
                                    <h1>${mockUsers[username]?.username || mockUsers.test.username}</h1>
                                    <p>${mockUsers[username]?.signature || mockUsers.test.signature}</p>
                                    <div>
                                        <span style="margin-right: 20px">粉丝 ${mockUsers[username]?.followers || mockUsers.test.followers}</span>
                                        <span>关注 ${mockUsers[username]?.following || mockUsers.test.following}</span>
                                    </div>
                                </div>
                                <button class="edit-profile-btn" onclick="showAlert('编辑个人资料')">编辑资料</button>
                            </div>
                            <div class="section-title">我的投稿</div>
                            <div class="video-grid">
                                ${(mockUsers[username]?.videos || mockUsers.test.videos).map(video => `
                                    <div class="video-card">
                                        <div class="video-thumbnail">
                                            <img src="${video.thumbnail}" alt="${video.title}">
                                            <div class="video-duration">${video.duration}</div>
                                        </div>
                                        <div class="video-info">
                                            <div class="video-title">${video.title}</div>
                                            <div class="video-meta">${video.views} 次观看</div>
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer">
                    © 2025 哔哩哔哩 bilibili.com 版权所有
                </div>
            `;
        }

        function logout() {
            localStorage.removeItem('currentUser');
            window.location.href = '#';
            window.location.reload();
        }
    </script>
</body>
</html>